<template>
  <el-container direction="vertical">
    <div class="btn-submit">
      <el-button id="planExportBtn" class="margin-right-10" size="mini" slot="reference" plain @click="exportPlan">导出</el-button>
      <el-upload id="planImportBtn" class="inline-block upload-demo" slot="reference" :show-file-list="false" style="padding: 0 10px" action accept="" :http-request="event => beforeupload(event.file)">
        <el-button class="margin-right-10" plain>导入</el-button>
      </el-upload>
      <el-button id="planOptBtn" style="margin-right:10px;" plain @click="open" slot="reference">提交</el-button>
    </div>
    <mainContainerMenu :isTab="!!isTabMap[$route.name]" :isShowIframeHeader="false"></mainContainerMenu>

    <el-dialog
      title="计划变更"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%">
      <span>是否确认进行计划变更，如果选择‘不变更’则不能再次进行变更！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="confirmHandle('reject')">不变更</el-button>
        <el-button type="primary" @click="confirmHandle('agree')">变更</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import mainContainerMenu from '@/common/components/mainContainerMenu';
import Api from './api/incomeAndExpenditurePlan';
export default {
  name: 'home',
  data() {
    return {
      isTabMap: {
        EquipmentManage: true,
      },
      dialogVisible: false
    };
  },
  mounted() {
    this.setExportBtn();

    Api.constant({}).then(res => {
      this.$store.state.planconstantMap = res;
    });
    this.plandetail();

    this.openEditConfirm();

  },
  methods: {
    openEditConfirm () {
      if (!this.$route.query.planKey || !this.$route.query.isEditConfirm) {
        return
      }

      this.dialogVisible = true
    },
    async confirmHandle (optType) {
      let res = await Api.planEditConfirm({
        planKey: this.$route.query.planKey,
        optType: optType
      })

      if (res.success) {
        this.$message.success('操作成功');
        let url = location.href.replace('&isEditConfirm=1', '')
        location.replace(url)
      } else {
        this.$message.warning(res.success);
      }
    },
    plandetail() {
      // if (this.$route.query.processWorkId) {
      //   Api.planInfoDetail({ primaryKey: this.$route.query.processWorkId }).then(res => {
      //     this.$store.state.planDetail = res;
      //     this.isShowSubmit = false;
      //   });
      // } else

      if (this.$route.query.planKey) {
        Api.plandetail({ primaryKey: this.$route.query.planKey }).then(res => {
          this.$store.state.planDetail = res;
          if (res.status == 4 && this.$route.path.indexOf('/businessManage/') > -1) {
            this.setOptBtn()
          }
        });
      }
    },
    setOptBtn () {
      this.$nextTick(() => {
        let optBtnEle = document.getElementById("planOptBtn");
        let planImportBtn = document.getElementById("planImportBtn");
        let parentEle = document.getElementById("headerOptBtnBox");
        parentEle.appendChild(optBtnEle);
        parentEle.appendChild(planImportBtn);
      })
    },
    setExportBtn () {
      if (this.$route.path.indexOf('/businessManage/') > -1) {
        setTimeout(()=>{
          let planExportBtn = document.getElementById("planExportBtn");
          let parentEle = document.getElementById("headerOptBtnBox");
          parentEle.appendChild(planExportBtn);
        },1000)
      }
    },
    open() {
      this.$confirm('确定要提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.submitTableCopy();
        })
        .catch(() => {});
    },
    // header上的提交
    submitTableCopy() {
      let planKey = this.$route.query.planKey ? this.$route.query.planKey : '';
      Api.submitTableCopy({ primaryKey: planKey }).then(res => {
        if (res.success) {
          this.$message.success('提交成功');
          location.reload();
        } else {
          this.$message.warning('提交失败，请重试');
        }
      });
    },
    //导出计划
    async exportPlan () {
      await Api.apiExportPlan ({
        planKey:this.$route.query.planKey
      })
    },
    //导入计划
    async beforeupload (file) {
      Api.apiImportPlan(file).then(res => {
        this.$message.success('上传成功');
        location.reload();
      });
    }
  },
  components: {
    mainContainerMenu,
  },
};
</script>

<style lang="scss" scoped>
.btn-submit {
  display: none;
}
.inline-block{
  display: inline-block;
}
</style>